import React, { useEffect, useState, useTransition } from "react";
import { BannersWrapper } from "./style";
import propTypes from "prop-types"
import Swiper from 'swiper'
import { Link } from "react-router-dom";

export const Banners = ({ banners }) => {
    let swiper = null;
    useEffect(() => {
        console.log('Swiper 不能多次实例化')
        if (swiper) {
            // 如果实例化了，就不new Swiper了
            return
        }
        swiper = new Swiper('.btn-banner', {
            loop: true,
            pagination: {
                el: '.swiper-pagination'
            }
        })
    })
    // [] 空，useEffect 只执行一次
    const renderBtnBannersPage1 = () => {
        let items = banners.slice(0, 10);
        return items.map(item => {
            return (
                <Link
                    to="/eleme/all"
                    className="swiper-item"
                    key={item.id}
                >
                    <div>
                        <p><img src={item.img} alt="" /></p>
                        <span>{item.title}</span>
                    </div>
                </Link>
            )
        })
    }
    const renderBtnBannersPage2 = () => {
        let items = banners.slice(10,);
        return items.map(item => {
            return (
                <Link
                    to="/eleme/all"
                    className="swiper-item"
                    key={item.id}
                >
                    <div>
                        <p><img src={item.img} alt="" /></p>
                        <span>{item.title}</span>
                    </div>
                </Link>
            )
        })
    }


    return (
        <BannersWrapper>
            <div className="btn-banner swiper-container">
                <div className="swiper-wrapper">
                    <div className="swiper-slide">
                        {renderBtnBannersPage1()}
                    </div>
                    <div className="swiper-slide">
                        {renderBtnBannersPage2()}
                    </div>
                </div>
                <div className="swiper-pagination"></div>
            </div>
        </BannersWrapper>
    )
}

// 确定props数据
Banners.propTypes = {
    banners: propTypes.array.isRequired
}

export default Banners
// rfc 